<template>
  <div>
    <!-- 文本 -->
    <el-input
      v-if="questionItem.questionType == 'text'"
      size="small"
      value="待填写人完成"
      placeholder="待填写人完成"
      disabled
      :style="{width: '100%'}"
    ></el-input>
    <!-- 多行文本 -->
    <Editor
      v-else-if="questionItem.questionType == 'multiline_text'"
      :minHeight="120"
      placeholder="待填写人完"
      :readOnly="true"
    ></Editor>
    <!-- 数字 -->
    <div v-else-if="questionItem.questionType == 'number'">
      <el-input size="small" type="number" placeholder="待填写人完成" disabled :style="{width: '100%'}"></el-input>
      <div>数据验证：数字</div>
    </div>
    <!-- 文件 -->
    <div v-else-if="questionItem.questionType == 'file'">
      <div class="fileBox">待填写人完成</div>
      <div>数量限制：至多9个</div>
    </div>
    <!-- 金额 -->
    <div v-else-if="questionItem.questionType == 'amount'">
      <el-input
        prefix-icon
        size="small"
        type="number"
        placeholder="￥待填写人完成"
        disabled
        :style="{width: '100%'}"
      ></el-input>
      <div>数据验证：金额</div>
    </div>
    <!-- 图片 -->
    <div v-else-if="questionItem.questionType == 'image'">
      <div class="fileBox">待填写人上传图片</div>
      <div>数量限制：至多9个</div>
    </div>

    <!-- 日期 -->
    <el-date-picker
      v-else-if="questionItem.questionType == 'date'"
      disabled
      type="date"
      placeholder="年/月/日"
    ></el-date-picker>
    <!-- 时间 -->
    <el-time-picker
      v-else-if="questionItem.questionType == 'date_time'"
      disabled
      :picker-options="{
      selectableRange: '00:00:00 - 23:59:59'
    }"
      placeholder="时/分/秒"
    ></el-time-picker>
    <!-- 时长 -->
    <el-date-picker
      v-else-if="questionItem.questionType == 'duration'"
      type="daterange"
      disabled
      range-separator="至"
      start-placeholder="开始日期"
      end-placeholder="结束日期"
    ></el-date-picker>

    <!--下拉/多选/单选 -->
    <div v-else>
      <div class="df aic mb5" v-for="(item,index) in  questionItem.questionExtendArr" :key="index">
        <i class="el-icon-remove mr5 fs20" @click="delSelect(index)" style="color:#979a9d"></i>
        <el-input size="small" v-model="item.value" :style="{width: '100%'}"></el-input>
      </div>
      <div @click="addSelect" class="df aic mt5" style="color:#409EFF">
        <i class="el-icon-circle-plus mr5 fs20"></i>
        <div>添加选项</div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    questionItem: {
      default: {
        questionExtendArr: [{ value: "选项1" }, { value: "选项2" }]
      }
    }
  },
  data() {
    return {
      selectList: [
        {
          value: "选项1"
        }
      ]
    };
  },
  methods: {
    addSelect() {
      this.questionItem.questionExtendArr.push({
        value: "选项" + (this.questionItem.questionExtendArr.length + 1)
      });
    },
    delSelect(index) {
      if (this.questionItem.questionExtendArr.length == 1) return;

      this.questionItem.questionExtendArr.splice(index, 1);
    }
  }
};
</script>
<style scoped>
.fileBox {
  background: #f2f2f2;
  border-radius: 4px;
  width: 100%;
  text-align: center;
  height: 40px;
  line-height: 40px;
}
</style>
